<template>
  <div>
    <Table
      :columns="tableColumns1"
      :data="boughtMusic"
      style="background: transparent; margin-top: 20px"
      border
      size="small"
      ref="table1">
    </Table>
    <div style="margin: 10px;overflow: hidden">
      <div style="display: flex; justify-content: space-between">
        <div>
          <Button type="primary" size="default" @click="exportData(1)">
            <Icon type="ios-download-outline"></Icon>
            导出源数据
          </Button>
          <Button type="primary" size="default" @click="exportData(2)" style="margin: auto 10px">
            <Icon type="ios-download-outline"></Icon>
            导出排序或过滤数据
          </Button>
          <Button type="primary" size="default" @click="exportData(3)">
            <Icon type="ios-download-outline"></Icon>
            导出自定义数据
          </Button>
        </div>
        <Page :total="100" :current="1" @on-change="changePage1"></Page>
      </div>
    </div>
  </div>
</template>

<script>
import { nsOfString, numToRegion, typeToChinese, validStatusFormat } from '@/common/utils'

export default {
  name: 'MyMusicTable1',
  data () {
    return {
      tableColumns1: [
        {
          title: '作品名称',
          key: 'musicName',
          width: 150,
          resizable: true,
          ellipsis: true,
          tooltip: true
        },
        {
          title: '授权代码',
          key: 'authorizationCode',
          width: 150,
          resizable: true,
          sortable: true,
          ellipsis: true,
          tooltip: true
        },
        {
          title: '版权注册号',
          key: 'registerCode',
          width: 150,
          resizable: true,
          sortable: true,
          ellipsis: true,
          tooltip: true
        },
        {
          title: '授权类型',
          key: 'type',
          width: 150,
          resizable: true,
          ellipsis: true,
          tooltip: true
        },
        {
          title: '授权种类',
          key: 'allowType',
          width: 150,
          resizable: true,
          ellipsis: true,
          tooltip: true
        },
        {
          title: '授权地域',
          key: 'allowRegion',
          width: 100,
          resizable: true,
          ellipsis: true,
          tooltip: true
        },
        {
          title: '授权状态',
          key: 'validStatus',
          width: 100,
          ellipsis: true,
          tooltip: true
        },
        {
          title: '操作',
          key: 'operation',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.showAuthorization(params.index)
                  }
                }
              }, '授权凭证'),
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.showMusicLink(params.index)
                  }
                }
              }, '作品链接')
            ])
          },
          ellipsis: true,
          tooltip: true
        }
      ],
      boughtMusic: []
    }
  },
  created () {
    this.$nextTick(() => {
      this.$post('/authorization/getBoughtMusic', {}).then(res => {
        if (res.data !== undefined) {
          const boughtMusic = res.data
          for (let i = 0; i < boughtMusic.length; i++) {
            const item = boughtMusic[i]
            if (item.allowRegion !== null) {
              item.allowRegion = numToRegion(item.allowRegion)
            }
            if (item.authorizationStartTime !== null || item.authorizationStartTime) {
              item.authorizationStartTime = nsOfString(item.authorizationStartTime, 10)
            }
            if (item.authorizationEndTime !== null || item.authorizationEndTime) {
              item.authorizationEndTime = nsOfString(item.authorizationEndTime, 10)
            }
            if (item.validStatus !== null) {
              item.validStatus = validStatusFormat(item.validStatus)
            }
            if (item.type !== null) {
              item.type = typeToChinese(item.type)
            }
            boughtMusic[i] = item
          }
          this.boughtMusic = boughtMusic
        }
      })
    })
  },
  methods: {
    showAuthorization (index) {

    },
    showMusicLink (index) {

    },
    changePage1 () {
      // The simulated data is changed directly here, and the actual usage scenario should fetch the data from the server
      this.tableData1 = this.tableData1 + []
    },
    exportData (type) {
      if (type === 1) {
        this.$refs.table1.exportCsv({
          filename: 'The original data'
        })
      } else if (type === 2) {
        this.$refs.table1.exportCsv({
          filename: 'Sorting and filtering data',
          original: false
        })
      } else if (type === 3) {
        this.$refs.table1.exportCsv({
          filename: 'Custom data',
          columns: this.tableColumns1.filter((col, index) => index < 4),
          data: this.tableData1.filter((data, index) => index < 4)
        })
      }
    }
  }
}
</script>

<style scoped>

</style>
